import Vue from 'vue'
import Component from './extNotify'

const NotificationConstructor = Vue.extend(Component)
const instaces = []
let seed = 1
const removeInstance = (instance) => {
  if (!instance) return
  const len = instaces.length
  const index = instaces.findIndex(inst => instance.id === inst.id)
  instaces.splice(index, 1)
  if (len <= 1) return
  const removeHeight = instance.vm.height
  for (let i = index; i < len - 1; i++) {
    instaces[i].verticalOffset =
    parseInt(instaces[i].verticalOffset) - removeHeight - 16
  }
}
const notify = (options) => {
  if (Vue.prototype.$isServer) return

  const {
    autoClose,
    ...rest
  } = options

  const instance = new NotificationConstructor({
    propsData: {
      ...rest
    },
    data: {
      autoClose: autoClose === undefined ? 3000 : autoClose
    }
  })

  const id = `notification_${seed++}`

  instance.id = id

  instance.vm = instance.$mount()

  document.body.appendChild(instance.vm.$el)
  instance.vm.visible = true
  let verticalOffset = 0

  instaces.forEach(item => {
    verticalOffset += item.$el.offsetHeight + 16
  })

  verticalOffset += 60

  instance.verticalOffset = verticalOffset

  instaces.push(instance)
  instance.vm.$on('closed', () => {
    removeInstance(instance)
    document.body.removeChild(instance.vm.$el)
    instance.vm.$destroy()
  })
  instance.vm.$on('close', () => {
    console.log(111)
    instance.vm.visible = false
  })
  return instance.vm
}
export default notify
